<template>
  <view class="content">
    <view class="content-header">
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
      <view class="swiper"> <u-swiper radius="5" indicator circular showTitle :list="list" keyName="coverUrl" height="200" @click="getinSwiper"></u-swiper></view>
  </view>
    
    <!-- 新闻区域 -->
     <view class="content-news">
      <view class="newsbody">
        <view class="bigbg" v-for="item in newsList" :key="item.id" @click="newsDetails(item.id)">
          <!-- <image style="width: 100%;height: 100%;" :src="item.coverUrl"></image> -->
          <view class="bgphoto"><image style="width: 100%;height: 100%;" :src="item.coverUrl"></image></view>
          <text style="position: absolute; top: 10rpx ; right: 10rpx; color: #FFFFFF; font-size: 20rpx;">{{ item.createTime.substring(0,11) }}</text>
          <view class="bgfont">{{ item.titleName.substring(0, 10) }} ...</view>
        </view>
      </view>
      
      <u-loadmore  height="30px" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
    </view>

  

    
  </view>
</template>

<script>

export default {
  data() {
    return {
      dataChange: {
        equipment: 0,
        pageIndex: 1,
        pageSize: 10,
        queryString: ''
      },
    
      newBur:true,
      comp:false,
      newsList: [],
      list:[],
      status: 'loadmore',
      loadingText: '加载中',
      loadmoreText: '上拉加载',
      nomoreText: '暂无更多'
    };
  },
  onLoad() {
    this.getNewsList();
   
  },
  onReachBottom() {
  
  if(this.newBur === true) {
    this.dataChange.pageSize = this.dataChange.pageSize + 5;
    this.status = 'loading';
    this.getNewsList();
    this.status = 'nomore';
  }else if( this.comp === true) {
    this.pageSize = this.pageSize + 5
     this.status = 'loading';
     
     this.status = 'nomore';
  }else{
    return
  }
   
  },
  methods: {  
           
    // 获取新闻列表
    async getNewsList() {
      const { data } = await uni.$http.post('/news/findPage', this.dataChange);
      console.log('我是新闻列表===>', data);
      if (data.statusCode !== 200) {
        return uni.showToast({
          title: '获取失败',
          icon: 'none'
        });
      } else {
        this.newsList = data.data.data;
        this.list = data.data.data
        this.list.forEach(item => {
          console.log('wowoww', item);
          item.title = item.titleName;
        });
        
        if(this.newsList.length === data.data.total) {
          return      this.status = 'nomore';
        }
      }
    },
    // 点击轮播图 进入新闻详情
    			getinSwiper(index) {
    			  //console.log('我是轮播图', index)
    			  //console.log('轮播图', this.list)
    			  const inx = index;
    			  this.list.forEach((item, index) => {
    			    //console.log(item)
    			    //console.log(index)
    			    if (index === inx) {
    			      this.lunbo = item;
    			    } else {
    			      return;
    			    }
    			  });
    			  console.log('哈哈哈哈哈', this.lunbo);
    			  uni.navigateTo({
    			    url: '../../components/newsDetails/newsDetails?id=' + this.lunbo.id
    			  });
    			},
    // 新闻详情
    newsDetails(id) {
      uni.navigateTo({
        url: '../../components/newsDetails/newsDetails?id=' + id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;

  .content-header {
    position: relative;
    height: 500rpx;
    image {
      width: 100%;
      height: 350rpx;
    }
			.swiper {
			  position: absolute;
			  top: 100rpx;
			  left: 0;
			  width: 100%;
			  box-sizing: border-box;
			  height: 350rpx;
			  padding: 0 20rpx;
			}
  }
  .content-news {
    background-color: #f2f2f2;
    padding: 0 20rpx;
    margin-top: 10rpx;
    .newsbody {
      background-color: #f7f7f7;
      padding: 0 20rpx;
      padding-bottom: 0;
      margin-top: 10rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    
      .bigbg {
        position: relative;
        width: 48%;
        height: 250rpx;
        margin-left: 10rpx;
        margin-bottom: 15rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        overflow: hidden;
        .bgphoto {
          height: 200rpx;
          background-color: pink;
        }
        .bgfont {
          background-color: #FFFFFF;
          height: 50rpx;
          display: flex;
          align-items: center;
          padding-left: 10rpx;
          font-size: 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

   
  }
}
</style>
